<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 添加图标 -->
    <link rel="shortcut icon" href="favicon.ico">
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- import Element UI -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <!-- 导入层叠样式表 -->
    <link rel="stylesheet" href="./css/login.css">
<body>
<div id="app">
    <h1>欢迎来到酷鲨商城</h1>
    <img src="imgs/shark.png">
    <h2>CoolSharkMall</h2>
    <el-card>
        <el-form
                :model="user"
                ref="user"
                :rules="rules"
                label-width="80px">
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="user.username" prefix-icon="el-icon-user-solid">
                </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="text" v-model="user.password" prefix-icon="el-icon-lock" show-password></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login()">登录</el-button>
                <el-button type="primary" @click="register">注册</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                user: {
                    id: '',
                    username: '',
                    password: '',
                },
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 11, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            register() {
                location.href = "register.html"
            },
            login() {
                // 判断用户名以什么开头
                // 执行所有校验
                this.loding();
                if (v.user.username.startsWith('1')) {
                    axios.post('/user/login', v.user).then(function (response) {
                        let responseBody = response.data;
                        if (responseBody.state === 20000) {
                            // 将用户信息保存到本地存储中
                            localStorage.setItem('userId', responseBody.data.id)
                            localStorage.setItem('nickname', responseBody.data.nickname)
                            location.href = 'user/index.html'
                        } else {
                            alert('登录失败' + responseBody.message)
                        }
                    })
                } else if (v.user.username.startsWith('r')||v.user.username.startsWith('G')){
                    axios.post('/admin/login', v.user).then(function (response) {
                        let responseBody = response.data;
                        console.log(responseBody.data)
                        if (responseBody.state === 20000) {
                            localStorage.setItem('username', responseBody.data.username)
                            location.href = 'admin/index.html'
                        } else {
                            v.$message.error(responseBody.message)
                        }
                    })
                }else {
                    v.$message.error("管理员或用户不存在,请检查输入的用户名是否正确....")
                }
            },
            loding() {
                const loading = this.$loading({
                    lock: true,
                    text: '登录中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                setTimeout(() => {
                    loading.close();
                }, 1000 * 1);
            }
        },
    })
</script>
</html>